﻿<div class="WAll PT">

	<div class="ContentBlockTitle">复选框组</div>	
	<ul class="ListBlock">
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelCheckbox">
				<input type="checkbox" name="mycheckbox" value="Books"/>
				<div class="ItemMedia">
					<i class="Icon IconCheckbox"></i>
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">Books</div>
				</div>
			</label>
		</li>
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelCheckbox">
				<input type="checkbox" name="mycheckbox" value="Books"/>
				<div class="ItemMedia">
					<i class="Icon IconCheckbox"></i>
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">Movies</div>
				</div>
			</label>
		</li>
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelCheckbox disabled">
				<input type="checkbox" name="mycheckbox" value="Books"/>
				<div class="ItemMedia">
					<i class="Icon IconCheckbox"></i>
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">disabled</div>
				</div>
			</label>
		</li>
	</ul>
	<div class="ContentBlockTitle">单选框组</div>	
		
	<ul class="ListBlock">
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelRadio">
				<input type="radio" name="myradio" value="Books"/>
				<div class="ItemInner">
					<div class="ItemTitle">Books</div>
				</div>
			</label>
		</li>
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelRadio">
				<input type="radio" name="myradio" value="Books"/>
				<div class="ItemInner">
					<div class="ItemTitle">Movies</div>
				</div>
			</label>
		</li>
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelRadio disabled">
				<input type="radio" name="myradio" value="Books"/>
				<div class="ItemInner">
					<div class="ItemTitle">disabled</div>
				</div>
			</label>
		</li>
	</ul>

	<div class="ContentBlockTitle">媒体列表复选框</div>
	
	<ul class="ListBlock MediaList">
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelCheckbox">
				<input type="checkbox" name="mycheckbox" value="Books"/>
				<div class="ItemMedia"><i class="Icon IconCheckbox"></i></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</label>
		</li>
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelCheckbox">
				<input type="checkbox" name="mycheckbox" value="Books"/>
				<div class="ItemMedia"><i class="Icon IconCheckbox"></i></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">不要阻止我</div>
						<div class="ItemAfter">$22</div>
					</div>
					<div class="ItemSubtitle">女王</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</label>
		</li>
	</ul>
	<div class="ContentBlockTitle">媒体列表单选框</div>
	
	<ul class="ListBlock MediaList">
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelRadio">
				<input type="radio" name="myradio1" value="Books"/>
				<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</label>
		</li>
		<li class="ListItem">
			<label class="ItemCon InkRipple LabelRadio">
				<input type="radio" name="myradio1" value="Books"/>
				<div class="ItemMedia"><img src="images/02.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">不要阻止我</div>
						<div class="ItemAfter">$22</div>
					</div>
					<div class="ItemSubtitle">女王</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</label>
		</li>
	</ul>
	<div class="ContentBlockTitle">选择是否</div>
	<div class="MTB ML">
		<label class="LabelCheckbox">
			<input type="checkbox" />
			<span class="checkbox"><i class="Icon IconCheckbox"></i></span>
			选择是否
		</label>
	</div>
</div>




















